<template>
    <div class="view-container">
        <Empty v-if="proCollectionInfo.length==0">没有新消息</Empty>
        <div class="collect_goods_info" v-if="proCollectionInfo.length!=0" v-loading="loading">
            <el-table
                    ref="multipleTable"
                    :data="proCollectionInfo"
                    border
                    tooltip-effect="dark"
                    style="min-width: 1078px;">
                <el-table-column prop="userName"
                                 label="收藏用户">
                </el-table-column>
                <el-table-column
                        label="收藏时间" sortable>
                    <template slot-scope="scope">
                        {{scope.row.collectTime| parseTime}}
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 24px;text-align: center;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import {parseTime} from '../../utils/datetime';
    import Empty from '@/components/Empty';
    import {getGoodsCollectsBygoodsId} from '@/api/usersList';

    export default {
        name: 'customerCollectGoodsInfo',
        components: {
            'Empty': Empty
        },
        data() {
            return {
                proCollectionInfo: [],
                currentPage: 1,
                pageSize: 5,
                total: 0,
                loading: false,
            }
        },
        mounted() {
            this.currentPage = 1;
            this.pageSize = 5;
            let id = this.$route.query.id || '';
            if (id) {
                this.getData(id);
            }
        },
        methods: {
            handleSizeChange(val) {
//              每页条数 后台传参数直接获取渲染 当前的customerList
                this.pageSize = val;
            },
            handleCurrentChange(val) {
//              当前页数
                this.currentPage = val
            },
            getData(id) {
                this.loading = true;
                let data = {
                    goodsId: id,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    desc: true
                };
                getGoodsCollectsBygoodsId(data)
                    .then(resp => {
//                        console.log(resp);
                        let list = resp.data.list || [];
                        this.total = resp.data.total || 0;
                        for (let item of list) {
                            let data = {
                                userName: item.userName,
                                collectTime: item.collectTime
                            };
                            this.proCollectionInfo.push(data);
                        }

                        setTimeout(()=> {
                            this.loading=false;
                        },300);
                    })
                    .catch(err => {
                        setTimeout(()=> {
                            this.loading=false;
                        },300);
                    })
            }
        }
    }
</script>

<style lang="less" scoped>
    .collect_goods_info {
        .el-pagination {
            margin-top: 24px;
        }

    }
</style>
